Node / reticulum_mirror / MeshChatX / files / meshchatx / src / frontend / components / messages / composer / AddAudioButton.vue

Displaying Raw • Download

T8b949e<!-- SPDX-License-Identifier: 0BSD AND MIT -->

Tff7b72<templateTff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"relative inline-flex shrink-0"Tff7b72>

Tff7b72<button

Te6edf3v-if=Ta5d6ff"isRecordingAudioAttachment"

Te6edf3type=Ta5d6ff"button"

Te6edf3class=Ta5d6ff"my-auto inline-flex items-center gap-x-1 rounded-full border border-red-200 bg-red-50 px-3 py-1.5 text-xs font-semibold text-red-700 shadow-xs hover:border-red-400 transition dark:border-red-500/40 dark:bg-red-900/30 dark:text-red-100"

@Te6edf3click=Ta5d6ff"stopRecordingAudioAttachment"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"microphone" Te6edf3class=Ta5d6ff"w-4 h-4" Tff7b72/>

Tff7b72<span Te6edf3class=Ta5d6ff"ml-1"Tff7b72>

Tff7b72<slot Tff7b72/>

Tff7b72</span>

Tff7b72</button>

Tff7b72<button

v-else

Te6edf3type=Ta5d6ff"button"

Te6edf3class=Ta5d6ff"my-auto inline-flex items-center justify-center rounded-lg size-8 text-gray-500 dark:text-zinc-400 hover:bg-gray-100 dark:hover:bg-zinc-800 hover:text-gray-800 dark:hover:text-zinc-100 transition-colors"

@Te6edf3click=Ta5d6ff"showMenu"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"microphone-plus" Te6edf3class=Ta5d6ff"w-5 h-5" Tff7b72/>

Tff7b72</button>

Tff7b72<Transition

Te6edf3enter-active-class=Ta5d6ff"transition ease-out duration-100"

Te6edf3enter-from-class=Ta5d6ff"transform opacity-0 scale-95"

Te6edf3enter-to-class=Ta5d6ff"transform opacity-100 scale-100"

Te6edf3leave-active-class=Ta5d6ff"transition ease-in duration-75"

Te6edf3leave-from-class=Ta5d6ff"transform opacity-100 scale-100"

Te6edf3leave-to-class=Ta5d6ff"transform opacity-0 scale-95"

Tff7b72>

Tff7b72<div

Te6edf3v-if=Ta5d6ff"isShowingMenu"

Te6edf3v-click-outside=Ta5d6ff"hideMenu"

Te6edf3class=Ta5d6ff"absolute bottom-full right-0 z-10 mb-2 max-w-[min(20rem,calc(100vw-1.5rem))] rounded-xl bg-white dark:bg-zinc-900 shadow-lg ring-1 ring-gray-200 dark:ring-zinc-800 focus:outline-hidden"

Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"py-1"Tff7b72>

Tff7b72<button

Te6edf3type=Ta5d6ff"button"

Te6edf3class=Ta5d6ff"w-full block text-left px-4 py-2 text-sm text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-800 whitespace-nowrap"

@Te6edf3click=Ta5d6ff"startRecordingCodec2('1200')"

Tff7b72>

Low Quality - Codec2 (1200)

Tff7b72</button>

Tff7b72<button

Te6edf3type=Ta5d6ff"button"

Te6edf3class=Ta5d6ff"w-full block text-left px-4 py-2 text-sm text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-800 whitespace-nowrap"

@Te6edf3click=Ta5d6ff"startRecordingCodec2('3200')"

Tff7b72>

Medium Quality - Codec2 (3200)

Tff7b72</button>

Tff7b72<button

Te6edf3type=Ta5d6ff"button"

Te6edf3class=Ta5d6ff"w-full block text-left px-4 py-2 text-sm text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-800 whitespace-nowrap"

@Te6edf3click=Ta5d6ff"startRecordingOpus()"

Tff7b72>

High Quality - OPUS

Tff7b72</button>

Tff7b72</div>

Tff7b72</div>

Tff7b72</Transition>

Tff7b72</div>

Tff7b72</template>

Tff7b72<scriptTff7b72>

import MaterialDesignIcon from "../../MaterialDesignIcon.vue";

export default {

name: "AddAudioButton",

components: {

MaterialDesignIcon,

},

props: {

isRecordingAudioAttachment: Boolean,

},

emits: ["start-recording", "stop-recording"],

data() {

return {

isShowingMenu: false,

};

},

methods: {

showMenu() {

this.isShowingMenu = true;

},

hideMenu() {

this.isShowingMenu = false;

},

startRecordingAudioAttachment(args) {

this.isShowingMenu = false;

this.$emit("start-recording", args);

},

startRecordingCodec2(mode) {

this.startRecordingAudioAttachment({

codec: "codec2",

mode: mode,

});

},

startRecordingOpus() {

this.startRecordingAudioAttachment({

codec: "opus",

});

},

stopRecordingAudioAttachment() {

this.isShowingMenu = false;

this.$emit("stop-recording");

},

},

};

Tff7b72</script>